<template>
	<div>
		<!--头部搜索栏-->
		<div class="chun-top">
			<a href="#/"><img class="chun-jian" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
			<a href="#/Sousuo"><input type="text" class="chun-shuru" placeholder="唇彩" /></a>
			<a href="###"><img class="chun-fangdaj" src="../assets/img/shouye/tuijian/sousuo.png" alt=""/></a>
			<a href="#/QingkongSousuo"><img class="chun-cha" src="../assets/img/shouye/sousuo/6close.png" alt=""/></a>
			<a href="###"><span class="chun-textsou">搜索</span></a>
		</div>
		<!--导航栏-->
		<shangpin-daohang></shangpin-daohang>
		<!--商品-->
		<div v-for="bb in 5" class="gloss">
			<!--左图片-->
			<div class="glossLeft">
				<img src="../assets/img/shouye/tuijian/chuncai.png" alt=""/>
			</div>
			<!--右内容-->
			<div class="glossRight">
				<!--标题-->
				<p class="biaogloss">
					焕彩萃璨花蕊唇彩4.8g
				</p>
				<!--介绍-->
				<p class="jiegloss">
					焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g
				</p>
				<!--图片-->
				<div class="imggloss">
					<img class="guoqi" src="../assets/img/shouye/sousuo/6tuo.png" alt=""/>
					<img class="huiji" src="../assets/img/duanhuowang/hui.png" alt=""/>
					<span class="hai">海外直邮</span>
					<span class="moneyQ">￥166.06</span>
				</div>
			</div>
		</div>
		<!--轮播图-->
		<div class="chun-tuilun">
			<div class="chun-tuiActive clun"><img src="../assets/img/shouye/tuijian/lunbo.png" alt=""/></div>
			<div class="clun"><img src="../assets/img/shouye/tuijian/t.png" alt=""/></div>
			<div class="clun"><img src="../assets/img/shouye/meishi/mei1.png" alt=""/></div>
		</div>
		<!--加载更多-->
		<p class="jiacai">
			加载更多
		</p>
	</div>
</template>

<script>
	export default {
		methods: {
			cai: function() {
				//轮播图
				var cindex = 0;
				setInterval(function() {
					$(".chun-tuilun>div").eq(cindex).fadeIn(2000).siblings("div").fadeOut(2000);
					cindex++;
					if(cindex == 3) {
						cindex = 0;
					}
				}, 4000);
			}
		},
		mounted:function(){
			this.cai();
		},
		components: {
			ShangpinDaohang
		}
	}
	import ShangpinDaohang from '@/components/ShangpinDaohang'
</script>

<style>
	/*头部搜索栏*/
	
	.chun-top {
		position: fixed;
		top: 0;
		left: 0;
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 5;
	}
	
	.chun-jian {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	.chun-cha {
		width: 3rem;
		height: 3rem;
		position: fixed;
		right: 17rem;
		top: 3.5rem;
	}
	
	.chun-shuru {
		width: 40rem;
		height: 4.8rem;
		border-radius: 1rem;
		font-size: 2.4rem;
		color: #E53E42;
		padding: 0 4rem;
		margin-left: 2rem;
	}
	
	.chun-textsou {
		font-size: 3rem;
		color: white;
	}
	
	.chun-fangdaj {
		position: fixed;
		width: 2.8rem;
		left: 9.5rem;
		top: 3.2rem;
	}
	/*各个商品*/
	
	.gloss {
		width: 100%;
		height: 20rem;
		border-bottom: 0.01rem solid #cccccc;
		background: #FFFFFF;
		margin-bottom: 2rem;
		overflow: hidden;
	}
	
	.glossLeft {
		width: 20rem;
		height: 20rem;
		text-align: center;
		line-height: 20rem;
		float: left;
	}
	
	.glossLeft>img {
		width: 6.9rem;
		height: 15.3rem;
		margin-top: 2.4rem;
	}
	/*右*/
	
	.glossRight {
		width: 52rem;
		height: 20rem;
		float: left;
	}
	
	.biaogloss {
		font-size: 3rem;
		width: 100%;
		height: 3rem;
		line-height: 3rem;
		margin: 2.8rem 0 2rem 0;
		color: #333333;
	}
	
	.jiegloss {
		font-size: 2.4rem;
		width: 47rem;
		text-align: left;
	}
	
	.imggloss {
		width: 100%;
		height: 6.4rem;
		line-height: 6.4rem;
	}
	
	.guoqi {
		width: 3rem;
		height: 2rem;
		border: 0.01rem solid #CCCCCC;
		margin: 0 2rem;
	}
	
	.huiji {
		width: 3.4rem;
		height: 3.3rem;
		padding-right: 1rem;
	}
	
	.hai {
		font-size: 2.4rem;
		color: #666666;
	}
	
	.moneyQ {
		font-size: 3rem;
		color: #E53E42;
		padding-left: 14rem;
	}
	/*轮播图*/
	
	.chun-tuilun {
		width: 100%;
		height: 30rem;
		position: relative;
	}
	
	.clun {
		width: 100%;
		height: 100%;
		display: none;
	}
	
	.clun>img {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.chun-tuiActive {
		display: block;
	}
	
	.jiacai {
		width: 100%;
		height: 5rem;
		line-height: 5rem;
		text-align: center;
		font-size: 2rem;
		color: #808080;
	}
</style>